<template>
  <div>
    客户详情页面
    <el-form label-position="right" label-width="180px" :model="client">
      <el-form-item label="客户名称">
        <el-input v-model="client.cname" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="客户公司地址">
        <el-input v-model="client.site" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="客户邮政编码">
        <el-input v-model="client.postal" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="客户公司规模">
        <el-input
          v-model="client.scale"
          :disabled="flag"
          v-if="flag"
        ></el-input>
        <el-select v-model="client.scale" style="width: 100%" v-if="!flag">
          <el-option label="特大型" value="特大型"></el-option>
          <el-option label="大型" value="大型"></el-option>
          <el-option label="中型" value="中型"></el-option>
          <el-option label="小型" value="小型"></el-option>
          <el-option label="微型" value="微型"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户公司业务区域">
        <el-input v-model="client.area" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="客户等级">
        <el-input
          v-model="client.grade"
          :disabled="flag"
          v-if="flag"
        ></el-input>
        <el-select v-model="client.grade" style="width: 100%" v-if="!flag">
          <el-option label="1级" value="1"></el-option>
          <el-option label="2级" value="2"></el-option>
          <el-option label="3级" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="client.contacts" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="client.phone" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="联系人邮箱">
        <el-input v-model="client.email" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="法人">
        <el-input v-model="client.legal" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="法人电话">
        <el-input v-model="client.legalphone" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="客户财务联系人">
        <el-input v-model="client.financecontacts" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="客户财务联系电话">
        <el-input v-model="client.financephone" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="开户银行">
        <el-input v-model="client.bank" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="银行账号">
        <el-input v-model="client.banknumber" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="当前状态">
        <el-input
          v-model="client.state"
          :disabled="flag"
          v-if="flag"
        ></el-input>
        <el-select v-model="client.state" style="width: 100%" v-if="!flag">
          <el-option label="启用" value="启用"></el-option>
          <el-option label="未启用" value="未启用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建人">
        <el-input v-model="client.creation" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model="client.creationtime" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="版本">
        <el-input v-model="client.versions" :disabled="flag"></el-input>
      </el-form-item>
      <el-form-item label="修改时间">
        <el-input v-model="client.amendtime" :disabled="flag"></el-input>
      </el-form-item>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-edit"
        @click="modifyClient"
        >{{ msg }}</el-button
      >
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-upload2"
        @click="submitClient"
        >提交修改</el-button
      >
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-back"
        @click="returnOrder"
        >返回订单</el-button
      >
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cid: "",
      client: {},
      flag: true,
      msg: "修改客户信息",
    };
  },
  mounted() {
    this.cid = this.$route.params.cid;
    this.getClient(this.cid);
  },
  methods: {
    //返回订单
    returnOrder() {
      this.$router.push("/orderList");
    },

    //打开或关闭修改
    modifyClient() {
      if (this.flag) {
        this.flag = false;
        this.msg = "取消修改";
      } else {
        this.flag = true;
        this.msg = "修改客户信息";
        this.getClient(this.client.cid);
      }
    },

    //提交修改客户信息
    submitClient() {
      if (this.flag) {
        this.$message("当前状态不能修改数据");
      } else {
        this.$confirm("是否要修改客户信息", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message("修改成功");
            this.$axios.post("/client/modify", this.client).then((resp) => {
              if (resp.data.code == 200) {
                this.flag = true;
                this.msg = "修改客户信息";
                this.getClient(this.client.cid);
              }
            });
          })
          .catch(() => {
            this.$message("已取消修改");
          });
      }
    },

    //查询客户信息
    getClient(cid) {
      this.$axios
        .get("/client/getByCid", {
          params: {
            cid: cid,
          },
        })
        .then((resp) => {
          if (resp.data.code == 200) {
            this.client = resp.data.data;
          }
        });
    },
  },
};
</script>

<style>
</style>